<template>
  <!-- 背景灰色部分 -->
  <el-container class="bg">
    <!-- 主体内容 -->
    <el-container style="margin-top: 15px;">
      <!-- 左侧帖子详情和评论 -->
      <el-aside style="margin-left: 15%; background-color: white; width: 50%;">
        <el-menu :default-active="activeIdx" mode="horizontal" :router="true">
          <el-menu-item v-for="(item, index) in navList" :key="index" :index="item.name">
            {{ item.navItem }}
          </el-menu-item>
        </el-menu>
        <el-row style="margin: 20px 0 10px 10px">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/user/' + this.from }">{{fromPage}}帖子</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>

          <PostDetail :postId="postId"></PostDetail>

          <div style="margin-top: 10px; text-align: center">
            <FinishButton :postId="postId" :key="new Date().getTime()"></FinishButton>
          </div>
        </el-row>
        <!-- 发布评论区 -->
        <CommentArea :postId="postId"></CommentArea>
      </el-aside>
      <!-- 右侧相关启事 -->
      <el-container style="margin-right: 15%; background-color: white;">
        <el-row style="margin-top: 10px">
          <el-row>
            <span style="font-weight: bold;font-size: 20px">相关启事</span>
          </el-row>
          <el-empty v-show="isEmpty" description="没有找到相关帖子哦"></el-empty>
          <RelatedPost :post="item" v-for="item in relatedPosts" :key="new Date().getTime()"></RelatedPost>
        </el-row>
      </el-container>
    </el-container>
    <!-- 页脚内容 -->
    <el-footer align="center">
      ©2023毕业实习 - 失物招领系统
    </el-footer>
  </el-container>
</template>

<script>
import PostDetail from "@/views/post/components/PostDetail.vue";
import FinishButton from "@/views/post/components/FinishButton.vue";
import CommentArea from "@/components/comment/CommentArea.vue";
import RelatedPost from "@/views/post/components/RelatedPost.vue";
import { getPostListByMultipleCondition } from "@/api/search/post";
import { getDetailInfoByPostId } from "@/api/post/post";

export default {
  components: { RelatedPost, CommentArea, FinishButton, PostDetail },
  inject: ['reload'],
  data() {
    return {
      postId: 0,
      post: {},
      from: 0,
      fromPage: '',
      relatedPosts: [],
      isEmpty: false,
      navList:[
        { name:'/user/all', navItem:'所有' },
        { name:'/user/publish', navItem:'发布' },
        { name:'/user/message', navItem:'消息' },
        { name:'/user/mine', navItem:'我的' }
      ]
    }
  },
  methods: {
    getPostInfo() {
      getDetailInfoByPostId({
        postId: Number(this.postId)
      }).then(res => {
        if (res.data.code === 200) {
          this.post = res.data.postDetailInfoVO
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    getRelatedPosts() {
      getPostListByMultipleCondition({
        completeStatus: 0,
        reviewStatus: 2,
        itemTypeId: this.post.itemTypeId,
        pageNo: 1,
        pageSize: 10,
        sortByGmtCreate: 'desc'
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.searchResult.dataList !== null) {
            this.relatedPosts = res.data.searchResult.dataList
            this.isEmpty = false
          } else {
            this.relatedPosts = []
            this.isEmpty = true
          }
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.postId = this.$route.query.id
    this.getPostInfo()
    this.getRelatedPosts()
    let fromMap = new Map()
    fromMap.set('all', '所有')
    fromMap.set('mine', '我的')
    this.from = this.$route.query.from
    this.fromPage = fromMap.get(this.from)
  },
  watch: {
    $route(to, from) {
      this.reload()
    }
  },
  computed: {
    activeIdx() {
      const { name } = this.$route
      switch (name) {
        case 'all':
          return '/user/all'
        case 'mine':
          return '/user/mine'
        case 'message':
          return '/user/message'
        case 'publish':
          return '/user/publish'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  background-color: #f7f7f7;
  height: auto;
}

.related-posts {
  margin-right: 15%;
  background-color: white;
}

.el-footer {
  margin-top: 20px;
  font-size: 15px;
  color: #5f5f5f;
}
</style>
